<template>
 <div class="card-table">
    <div class="header">
        <div @click="$router.go(-1)" class="goBackIcon">
            <i class="el-icon-arrow-left" style="margin-right:1px;"></i>返回
        </div>
        <div style="margin-left:16px;">机加工工单详情</div>
    </div>
    <div class="main">
      <el-descriptions class="margin-top" :column="3">
        <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="工单编号">
          {{form.code}}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="目标客户">
          {{form.targetCustomer}}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="负责人">
          {{form.principal}}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="填表人">
          {{form.inputPeople}}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="生产开始时间">
          {{form.produceStartTime}}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="生产结束时间">
          {{form.produceEndTime}}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="工单生成时间">
          {{form.workOrderStartTime}}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="工单结束时间">
          {{form.workOrderEndTime}}
        </el-descriptions-item>
      </el-descriptions>
      </div>
      <div class="footer">
      <div class="tableHead">
        焙烧工单详情
      </div>
          <el-descriptions direction="vertical" :column="5" border>
            <el-descriptions-item label="焙烧工单编号">{{form.code}}</el-descriptions-item>
            <el-descriptions-item label="机加工数量">{{form.crucibleNumber}}</el-descriptions-item>
            <el-descriptions-item label="焙烧工单生成时间">{{form.crucibleFirstRoast.workOrderStartTime.slice(0,-3)}}</el-descriptions-item>
            <el-descriptions-item label="炉号 / 外加工单位">{{form.crucibleFirstRoast.isOutHelp?form.crucibleFirstRoast.outHelpCompany:form.crucibleFirstRoast.stoveCode}}</el-descriptions-item>
            <el-descriptions-item label="装炉人 / 负责人">{{form.crucibleFirstRoast.inStoveMan}}</el-descriptions-item>
          </el-descriptions>
    </div>
 </div>
</template>

<script>
export default {
  name: 'test',
  components: {},
  data () {
    return {
      form: {
        inputPeople: this.$store.getters.getUserName,
        stoveCode: '', // 炉号
        produceStartTime: '', // 开始生产时间
        workOrderEndTime: '' // 工单结束时间
      }
    }
  },
  computed: {
  },
  watch: {},
  created () {},
  mounted () {
    const payload = JSON.parse(this.$route.query.row)
    this.form = payload
    console.log(this.form)
  },
  methods: {
    getRowClass2 ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'font-weight:200;background-color:#FAFAFA;color:#999;'
      } else {
        return ''
      }
    }
  }
}
</script>

<style  scoped>
.card-table{
    padding: 0;
}
.header{
    display: flex;
    align-items: center;
    padding: 18px;
    border-bottom: thin solid rgb(228, 236, 240);
    .goBackIcon{
        cursor: pointer;
        color: $primary;
    }
}
.main{
  padding: 24px;
  padding-bottom: 12px;
  border-bottom: thin solid #e4ecf0;
}
.footer{
  padding: 24px;
  padding-bottom: 40px;
}
.tableHead{
  margin-bottom: 24px;
}
</style>
<style>
.my-label{
  width: 100px;
  padding: 2px;
  color: #999;
}
.my-content{
  padding: 2px;
  color: #111;
}
</style>
